<template>
  <div class="shop">
    <div class="cont">
      <div class="top-t"><p>商品</p> <div class="sch-m">
          <input
          @click="changefont"
          @change="back"
            type="text"
            name="sc-shop"
            placeholder="输入你要搜索的商品"
            class="search"
          />
          <input  @click="jumpSearch" type="submit" name="send" class="send" value="搜索" />
        </div></div>

      <div class="st">
        <form action="">
          <div class="st_text">
            排序方式
            <select class="st1" @change='fn' >
              <option value="x1">选择排序方式</option>
              <option value="up">价格升序</option>
              <option value="down">价格降序</option>
            
            </select>
          </div>
        </form>
      </div>
    </div>

    <!-- 商品页—————————————————————————————————————————————————————————————— -->
    <div class="cont">
      <div class="product">
        <ul id="main">
          <li v-for="(item, index) in pic" :key="index">
            <img :src="item.path" alt="" width="100%" />
            <div>
              <h3>{{item.name}}</h3>
              <p><span>￥{{item.oldpce}}</span> <span>￥{{item.newpce}}</span></p>
            </div>
          </li>
        
        </ul>
      </div>
      <div class="page">
        <a href=""><i> &lt;</i></a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href=""><i> > </i></a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less" >
   .sch-m {
        position: absolute;
        .search {
          position: absolute;
          width: 522px;
          height: 42px;
          top: -61px;
          left: 300px;
          border-radius: 50px;
          border: #666 solid 1px;
          outline: none;
          padding-left: 20px;
          font-size: 18px;
       
        }
        .send {
          font-size: 18px;
          position: absolute;
          top: -61px;
          left: 750px;
          width: 100px;
          height: 42px;
          background-color: #7f87ab;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px;
          border: none;
          outline: none;
          cursor: pointer;
        }
      }
.cont {
  width: 100%;
  .st {
    width: 1200px;
    margin: auto;
    margin-top: 50px;
    .st_text{
      height: 60px;
      background-color: #f3f3f3;
      line-height: 60px;
    }
    .st1 {
      height: 28px;

      border: 1px solid #fff;
      background: #fff !important;

      width: 154px;
      color: #222;
      margin-left: 20px;
      outline: none;
    }
  }
  .top-t {
    position: relative;
    width: 1200px;
    margin: auto;
    margin-top: 80px;
  

    p {
      font-size: 28px;
      font-weight: 300px;
    }
  }
  .product {
    width: 1200px;
    margin: auto;
    margin-top: 50px;
    div {
      text-align: center;
      h3 {
        margin: 15px 0;
      }
    }
    ul {
      width: 1200px;
      height: 1200px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        width: 266px;
        height: 374px;
        border: solid 1px rgba(102, 102, 102, 0.2);
        display: inline-block;
        transition: all linear 0.3s;
        cursor: pointer;
        &:hover {
          z-index: 2;
          -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
          -webkit-transform: translate3d(0, -2px, 0);
          transform: translate3d(0, -2px, 0);
          border: 1px solid rgba(102, 102, 102, 0);
        }
        span:first-child{
          color:#666;
          text-decoration: line-through;
        }
      }
    }
  }
}
.page {
  width: 1200px;
  margin: auto;
  text-align: center;

  a {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 39px;
    text-align: center;
    border: 1px solid #F1F1F1;
    font-size: 16px;
    color: #888;
    font-weight: 500;
    margin-left: 15px;
    border-radius: 50%;
    transition: all linear 0.2s;
    &:hover {
      background-color: #7f87ab;
      color: #fff;
    }
  }
  a:first-child {
    margin-left: 0;
  }
}
</style>

 <script>
export default {
  data() {
    return {
      allArea:'',
      origin:[{ path: "img/sp.jpg", name: "音响11", oldpce: "65", newpce: "60" },
        { path: "img/sp1.jpg", name: "音响22", oldpce: "75", newpce: "70" },
        { path: "img/sp2.jpg", name: "音响3", oldpce: "105", newpce: "99" },
        { path: "img/sp3.jpg", name: "音响4", oldpce: "921", newpce: "900" },
        { path: "img/sp4.jpg", name: "音响5", oldpce: "333", newpce: "300" },
        { path: "img/sp5.jpg", name: "音响6", oldpce: "213", newpce: "199" },
        { path: "img/sp6.jpg", name: "音响7", oldpce: "132", newpce: "99" },
        { path: "img/sp7.jpg", name: "音响11", oldpce: "94", newpce: "88" },
         { path: "img/sp4.jpg", name: "音响22", oldpce: "76", newpce: "69" },
        { path: "img/sp5.jpg", name: "音响", oldpce: "72", newpce: "67" },
        { path: "img/sp6.jpg", name: "音响", oldpce: "98", newpce: "88" },
        { path: "img/sp7.jpg", name: "音响", oldpce: "111", newpce: "90" },],
      pic: [
        { path: "img/sp.jpg", name: "音响11", oldpce: "65", newpce: "60" },
        { path: "img/sp1.jpg", name: "音响22", oldpce: "75", newpce: "70" },
        { path: "img/sp2.jpg", name: "音响3", oldpce: "105", newpce: "99" },
        { path: "img/sp3.jpg", name: "音响4", oldpce: "921", newpce: "900" },
        { path: "img/sp4.jpg", name: "音响5", oldpce: "333", newpce: "300" },
        { path: "img/sp5.jpg", name: "音响6", oldpce: "213", newpce: "199" },
        { path: "img/sp6.jpg", name: "音响7", oldpce: "132", newpce: "99" },
        { path: "img/sp7.jpg", name: "音响11", oldpce: "94", newpce: "88" },
         { path: "img/sp4.jpg", name: "音响22", oldpce: "76", newpce: "69" },
        { path: "img/sp5.jpg", name: "音响", oldpce: "72", newpce: "67" },
        { path: "img/sp6.jpg", name: "音响", oldpce: "98", newpce: "88" },
        { path: "img/sp7.jpg", name: "音响", oldpce: "111", newpce: "90" },
      ],
    };
  },
  methods:{
    
    fn(){
      
      var val=document.getElementsByClassName('st1')[0].value;
      if (val=='up') {
        this.pic.sort((a,b)=>{
            	//排序基于的数据
              			return a.newpce - b.newpce;
           		 })
      }if (val=='down') {
       this.pic.sort((a,b)=>{
            	//排序基于的数据
              			return b.newpce - a.newpce;
           		 })
      }
         
      
    },
    changefont(){
    $(".search").attr('placeholder','试试搜 凳子 桌子 ')
   
},
back(){
 
   
 
},

//搜索跳转
jumpSearch(){
     this.pic = this.origin
    var str = $('.search').val();
    str=str.replace(/\s+/g,""); 
    if (str.length>0) {
                setTimeout(() => {
          this.allArea=[];
    
  this.pic.filter(item => {
        if (item.name.indexOf(str) !== -1) { // 此处也可使用js的 search 方法实现indexOf 一样效果
          this.allArea.push(item);
          document.getElementById("main").style.justifyContent = "start";
          this.pic=this.allArea
         
   }
  })
  }, 500);
      
    }



},



  },
   mounted() {
    
   }
  
};
</script>